<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>备孕伴程 - 母婴互动指南</title>
        <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
        <style>
            body {
                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                background-color: #f7fafc;
            }
            .iphone-frame {
                width: 390px;
                height: 844px;
                border-radius: 40px;
                overflow: hidden;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
                margin: 20px auto;
                background-color: white;
                position: relative;
            }
            .status-bar {
                height: 44px;
                background-color: #f7fafc;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 15px;
                font-size: 12px;
            }
            .bottom-nav {
                height: 70px;
                background-color: #ffffff;
                border-top: 1px solid #e2e8f0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                position: absolute;
                bottom: 0;
                width: 100%;
            }
            .tab-active {
                color: #f472b6; /* 粉色系，适合母亲角色 */
            }
            .main-content {
                height: calc(100% - 114px); /* 全高减去状态栏和底部导航 */
                overflow-y: auto;
                padding-bottom: 16px;
            }
            /* 滚动条样式美化 */
            .main-content::-webkit-scrollbar {
                width: 4px;
            }
            .main-content::-webkit-scrollbar-track {
                background: #f1f1f1;
            }
            .main-content::-webkit-scrollbar-thumb {
                background: #c5c5c5;
                border-radius: 2px;
            }
            /* 提示框样式 */
            .toast {
                position: fixed;
                bottom: 80px;
                left: 50%;
                transform: translateX(-50%);
                background-color: rgba(0, 0, 0, 0.7);
                color: white;
                padding: 10px 20px;
                border-radius: 20px;
                font-size: 14px;
                z-index: 1000;
                opacity: 0;
                transition: opacity 0.3s ease;
            }
            .toast.show {
                opacity: 1;
            }
            /* 互动卡片样式 */
            .interaction-card {
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
                transition: all 0.3s ease;
            }
            .interaction-card:hover {
                box-shadow: 0 4px 12px rgba(244, 114, 182, 0.15); /* 粉色阴影 */
                transform: translateY(-2px);
            }
            /* 选项卡样式 */
            .interaction-tabs {
                display: flex;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                padding: 0 20px;
            }
            .interaction-tabs::-webkit-scrollbar {
                display: none;
            }
            .interaction-tab {
                flex: 0 0 auto;
                padding: 8px 16px;
                white-space: nowrap;
                transition: all 0.3s ease;
                border-bottom: 2px solid transparent;
            }
            .interaction-tab.active {
                color: #f472b6; /* 粉色系，适合母亲角色 */
                border-bottom: 2px solid #f472b6;
                font-weight: 500;
            }
            /* 活动级别标签 */
            .activity-level {
                display: inline-block;
                padding: 2px 8px;
                border-radius: 12px;
                font-size: 10px;
                font-weight: 500;
                text-transform: uppercase;
            }
            .activity-level.easy {
                background-color: #dcfce7;
                color: #15803d;
            }
            .activity-level.medium {
                background-color: #fef9c3;
                color: #a16207;
            }
            .activity-level.challenging {
                background-color: #fee2e2;
                color: #b91c1c;
            }
            /* 发展类别徽章 */
            .development-badge {
                display: inline-flex;
                align-items: center;
                padding: 3px 8px;
                border-radius: 10px;
                font-size: 10px;
                margin-right: 4px;
                margin-bottom: 4px;
            }
            /* 步骤样式 */
            .step-circle {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                font-size: 12px;
                flex-shrink: 0;
            }
            /* 视频预览容器 */
            .video-preview {
                position: relative;
                border-radius: 12px;
                overflow: hidden;
                margin: 15px 0;
            }
            .video-overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.2);
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .play-button {
                width: 50px;
                height: 50px;
                background-color: rgba(255, 255, 255, 0.9);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            }
            /* 响应式图片网格 */
            .image-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
                margin: 15px 0;
            }
            .grid-image {
                width: 100%;
                border-radius: 8px;
                aspect-ratio: 1/1;
                object-fit: cover;
            }
        </style>
    </head>
    <body>
        <div class="iphone-frame">
            <!-- 顶部状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <span><i class="fas fa-signal"></i> <i class="fas fa-wifi"></i> <i class="fas fa-battery-full"></i></span>
            </div>

            <!-- 主要内容区域 -->
            <div class="main-content" id="main-content">
                <!-- 页面标题 -->
                <div class="flex items-center px-4 py-3 bg-white shadow-sm sticky top-0 z-10">
                    <a href="home.html" class="text-pink-500 mr-3">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                    <h1 class="text-lg font-medium">母婴互动指南</h1>
                </div>

                <!-- 页面内容区域 -->
                <div class="px-4 py-4">
                    <!-- 页面介绍 -->
                    <div class="bg-pink-50 rounded-xl shadow-sm p-4 mb-5">
                        <div class="flex items-start">
                            <div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0 mr-3">
                                <i class="fas fa-baby text-pink-600 text-xl"></i>
                            </div>
                            <div>
                                <h2 class="text-lg font-bold text-pink-900 mb-1">母婴互动指南</h2>
                                <p class="text-sm text-pink-800">
                                    母亲与婴儿之间的互动是建立亲密情感纽带的基础，对宝宝的身心发展至关重要。通过有意义的互动，您可以促进宝宝的大脑发育，培养安全依恋关系，并支持全面发展。
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- 互动指南选项卡 -->
                    <div class="bg-white rounded-xl shadow-sm mb-5 overflow-hidden">
                        <div class="interaction-tabs border-b border-gray-100">
                            <button class="interaction-tab active" data-content="basics">互动基础</button>
                            <button class="interaction-tab" data-content="age-stages">年龄阶段</button>
                            <button class="interaction-tab" data-content="activities">互动活动</button>
                            <button class="interaction-tab" data-content="bonding">情感连接</button>
                            <button class="interaction-tab" data-content="development">发展促进</button>
                        </div>
                    </div>

                    <!-- 选项卡内容区域 -->
                    <div class="interaction-content">
                        <!-- 互动基础内容 - 这里将在后续步骤添加详细内容 -->
                        <div id="basics-content" class="interaction-content-item">
                            <!-- 互动的重要性 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                <h3 class="font-bold text-gray-800 mb-3">母婴互动的重要性</h3>
                                
                                <div class="video-preview">
                                    <img src="https://images.unsplash.com/photo-1492725764893-90b379c2b6e7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="母婴互动" class="w-full h-48 object-cover">
                                    <div class="video-overlay">
                                        <div class="play-button">
                                            <i class="fas fa-play text-pink-600"></i>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="space-y-3 text-sm text-gray-600 mt-4">
                                    <p>母亲与婴儿之间的互动是亲子关系和婴儿发展的基石，科学研究表明早期母婴互动对宝宝产生深远影响：</p>
                                    
                                    <div class="flex items-start">
                                        <div class="w-8 h-8 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0 mr-3 mt-0.5">
                                            <i class="fas fa-brain text-pink-600"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium text-gray-800">神经发展</p>
                                            <p>回应式的母婴互动刺激宝宝大脑神经连接的形成，尤其是负责情感、记忆和语言的区域。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mr-3 mt-0.5">
                                            <i class="fas fa-heart text-purple-600"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium text-gray-800">安全依恋</p>
                                            <p>敏感回应婴儿需求的互动有助于形成安全依恋，这是孩子情感健康和人际关系的基础。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mr-3 mt-0.5">
                                            <i class="fas fa-comment text-green-600"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium text-gray-800">语言发展</p>
                                            <p>与宝宝的日常对话、唱歌和阅读互动对婴儿语言能力发展至关重要，即使宝宝尚未开口说话。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center flex-shrink-0 mr-3 mt-0.5">
                                            <i class="fas fa-hand-holding-heart text-yellow-600"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium text-gray-800">情绪调节</p>
                                            <p>温和抚慰和有节奏的互动帮助婴儿学习调节自己的情绪，减少压力反应，培养情绪韧性。</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="bg-pink-50 p-3 rounded-lg mt-4">
                                    <p class="text-pink-800 text-sm">
                                        <i class="fas fa-lightbulb mr-1"></i>
                                        <span class="font-medium">温馨提示：</span>
                                        高质量的互动不需要特殊玩具或结构化活动，日常照料中的温柔交流、眼神接触和抚触同样重要。最宝贵的是您对宝宝的关注和回应。
                                    </p>
                                </div>
                            </div>

                            <!-- 互动基本原则 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                <h3 class="font-bold text-gray-800 mb-3">互动基本原则</h3>
                                
                                <div class="space-y-4 text-sm">
                                    <div class="flex">
                                        <div class="step-circle bg-pink-100 text-pink-600 mr-3">1</div>
                                        <div>
                                            <h4 class="font-medium text-gray-800 mb-1">顺应宝宝节奏</h4>
                                            <p class="text-gray-600">观察宝宝的信号和节奏，顺应他们的互动状态，不要强行刺激不想互动的婴儿。</p>
                                            <div class="flex flex-wrap mt-2">
                                                <span class="development-badge bg-green-100 text-green-800">
                                                    <i class="fas fa-plus mr-1"></i> 参与信号
                                                </span>
                                                <span class="development-badge bg-red-100 text-red-800">
                                                    <i class="fas fa-minus mr-1"></i> 回避信号
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="border border-gray-100 rounded-lg overflow-hidden">
                                        <div class="p-3 bg-green-50">
                                            <h4 class="font-medium text-green-800">婴儿参与信号</h4>
                                        </div>
                                        <div class="p-3">
                                            <div class="flex flex-wrap gap-2">
                                                <span class="bg-green-100 text-green-800 rounded-full px-2 py-1 text-xs">注视您的眼睛</span>
                                                <span class="bg-green-100 text-green-800 rounded-full px-2 py-1 text-xs">微笑或咯咯笑</span>
                                                <span class="bg-green-100 text-green-800 rounded-full px-2 py-1 text-xs">手脚活跃移动</span>
                                                <span class="bg-green-100 text-green-800 rounded-full px-2 py-1 text-xs">发出愉快声音</span>
                                                <span class="bg-green-100 text-green-800 rounded-full px-2 py-1 text-xs">身体放松</span>
                                                <span class="bg-green-100 text-green-800 rounded-full px-2 py-1 text-xs">模仿您的表情</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="border border-gray-100 rounded-lg overflow-hidden">
                                        <div class="p-3 bg-red-50">
                                            <h4 class="font-medium text-red-800">婴儿回避信号</h4>
                                        </div>
                                        <div class="p-3">
                                            <div class="flex flex-wrap gap-2">
                                                <span class="bg-red-100 text-red-800 rounded-full px-2 py-1 text-xs">移开视线</span>
                                                <span class="bg-red-100 text-red-800 rounded-full px-2 py-1 text-xs">皱眉或哭泣</span>
                                                <span class="bg-red-100 text-red-800 rounded-full px-2 py-1 text-xs">打哈欠</span>
                                                <span class="bg-red-100 text-red-800 rounded-full px-2 py-1 text-xs">身体僵硬</span>
                                                <span class="bg-red-100 text-red-800 rounded-full px-2 py-1 text-xs">握紧拳头</span>
                                                <span class="bg-red-100 text-red-800 rounded-full px-2 py-1 text-xs">用手遮脸</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="flex">
                                        <div class="step-circle bg-pink-100 text-pink-600 mr-3">2</div>
                                        <div>
                                            <h4 class="font-medium text-gray-800 mb-1">伺机而动</h4>
                                            <p class="text-gray-600">当宝宝发出声音或动作时，视为"对话邀请"，及时回应并等待宝宝再次回应，形成互动循环。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex">
                                        <div class="step-circle bg-pink-100 text-pink-600 mr-3">3</div>
                                        <div>
                                            <h4 class="font-medium text-gray-800 mb-1">情感调谐</h4>
                                            <p class="text-gray-600">用面部表情、声音和动作与宝宝的情绪状态同步，展示您理解并分享他们的感受。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex">
                                        <div class="step-circle bg-pink-100 text-pink-600 mr-3">4</div>
                                        <div>
                                            <h4 class="font-medium text-gray-800 mb-1">交流式对话</h4>
                                            <p class="text-gray-600">即使宝宝还不会说话，也要像对话一样与他们交流，描述您的行为，解释周围环境，等待他们"回答"。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex">
                                        <div class="step-circle bg-pink-100 text-pink-600 mr-3">5</div>
                                        <div>
                                            <h4 class="font-medium text-gray-800 mb-1">照顾自己</h4>
                                            <p class="text-gray-600">高质量互动需要您精力充沛，关注自己的情绪和需求，必要时寻求支持，才能更好地回应宝宝。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 适合母亲的互动方式 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                <h3 class="font-bold text-gray-800 mb-3">适合母亲的互动方式</h3>
                                
                                <div class="image-grid">
                                    <img src="https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="母婴面对面互动" class="grid-image">
                                    <img src="https://images.unsplash.com/photo-1530973428-5bf2db2e4d71?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="母婴阅读" class="grid-image">
                                    <img src="https://images.unsplash.com/photo-1554684765-8f9a76a71afc?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="母婴按摩" class="grid-image">
                                    <img src="https://images.unsplash.com/photo-1535572290543-960a8046f5af?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="母婴依偎" class="grid-image">
                                </div>
                                
                                <div class="space-y-4 text-sm mt-4">
                                    <div class="flex">
                                        <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-hand-holding-heart text-pink-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">温柔抚触与按摩</h4>
                                            <p class="text-gray-600">婴儿按摩不仅促进身体发育和消化系统健康，还能加深亲子联结，缓解宝宝紧张情绪，改善睡眠质量。</p>
                                            <p class="text-gray-500 text-xs mt-1">提示：选择宝宝安静清醒时进行，使用纯天然油脂，保持温暖环境</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex">
                                        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-music text-purple-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">唱歌与节律互动</h4>
                                            <p class="text-gray-600">婴儿特别喜欢母亲的声音，唱摇篮曲或儿歌，配合轻柔摇晃，有助于情感发展和听觉刺激，同时加强情感纽带。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex">
                                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-book text-blue-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">面对面交流</h4>
                                            <p class="text-gray-600">将宝宝面向您，保持20-30厘米的最佳互动距离，使用夸张的面部表情和柔和声音交流，帮助宝宝学习社交互动和情感表达。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex">
                                        <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-baby text-yellow-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">肌肤接触</h4>
                                            <p class="text-gray-600">皮肤接触（如袋鼠式护理）是最自然的互动方式，能释放催产素，加强情感纽带，调节体温，并促进母乳喂养。</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="bg-pink-50 p-3 rounded-lg mt-4">
                                    <p class="text-pink-800 text-sm">
                                        <i class="fas fa-lightbulb mr-1"></i>
                                        <span class="font-medium">尊重个体差异：</span>
                                        每个宝宝都有独特的气质和喜好。观察、尝试并尊重您宝宝的个性，找到最适合你们的互动方式，而不是强行套用"标准模式"。
                                    </p>
                                </div>
                            </div>

                            <!-- 建立日常互动习惯 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                <h3 class="font-bold text-gray-800 mb-3">建立日常互动习惯</h3>
                                
                                <p class="text-sm text-gray-600 mb-4">
                                    在日常护理中融入有意义的互动，能够在不增加负担的情况下培养亲子关系。以下是将互动融入日常的小技巧：
                                </p>
                                
                                <div class="space-y-3 text-sm">
                                    <div class="p-3 bg-gray-50 rounded-lg">
                                        <div class="flex items-center mb-2">
                                            <i class="fas fa-tshirt text-pink-500 mr-2"></i>
                                            <h4 class="font-medium text-gray-800">换尿布时刻</h4>
                                        </div>
                                        <p class="text-gray-600">每次更换尿布都是互动的黄金时机，可以进行眼神交流、轻柔对话、玩躲猫猫游戏或做简单的肢体游戏。</p>
                                    </div>
                                    
                                    <div class="p-3 bg-gray-50 rounded-lg">
                                        <div class="flex items-center mb-2">
                                            <i class="fas fa-utensils text-purple-500 mr-2"></i>
                                            <h4 class="font-medium text-gray-800">喂养互动</h4>
                                        </div>
                                        <p class="text-gray-600">无论是母乳还是奶瓶喂养，都是建立亲密感的重要时刻。保持眼神接触，轻声交谈，抚摸宝宝的手和脸，使喂养成为情感滋养。</p>
                                    </div>
                                    
                                    <div class="p-3 bg-gray-50 rounded-lg">
                                        <div class="flex items-center mb-2">
                                            <i class="fas fa-bath text-blue-500 mr-2"></i>
                                            <h4 class="font-medium text-gray-800">洗澡时光</h4>
                                        </div>
                                        <p class="text-gray-600">洗澡可以是每天最愉快的互动时光之一，唱洗澡歌谣，描述您的动作，让水花轻轻溅起，鼓励宝宝感受水的触感。</p>
                                    </div>
                                    
                                    <div class="p-3 bg-gray-50 rounded-lg">
                                        <div class="flex items-center mb-2">
                                            <i class="fas fa-moon text-indigo-500 mr-2"></i>
                                            <h4 class="font-medium text-gray-800">睡前仪式</h4>
                                        </div>
                                        <p class="text-gray-600">建立一致的睡前仪式，如轻柔按摩、讲故事、唱摇篮曲或轻轻摇晃，帮助宝宝放松并强化安全感。</p>
                                    </div>
                                    
                                    <div class="bg-pink-50 p-3 rounded-lg">
                                        <p class="text-pink-800 text-sm">
                                            <i class="fas fa-heart mr-1"></i>
                                            <span class="font-medium">母亲自我关爱：</span>
                                            质量比数量更重要。您不需要全天候与宝宝互动，更需要照顾好自己的身心需求，以保持积极精力。寻求家人支持，安排自己的休息时间也很重要。
                                        </p>
                                    </div>
                                    
                                    <div class="bg-purple-50 p-3 rounded-lg">
                                        <p class="text-purple-800 text-sm">
                                            <i class="fas fa-user-friends mr-1"></i>
                                            <span class="font-medium">伴侣参与：</span>
                                            鼓励伴侣参与互动，这不仅让宝宝获得不同的互动体验，也能让您获得休息和支持，促进全家情感联结。
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 其他选项卡内容 - 这里将在后续步骤添加详细内容 -->
                        <div id="age-stages-content" class="interaction-content-item hidden">
                            <!-- 年龄阶段介绍 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                <h3 class="font-bold text-gray-800 mb-3">按年龄阶段互动</h3>
                                
                                <p class="text-sm text-gray-600 mb-4">
                                    每个发育阶段的宝宝都有不同的需求和能力。作为母亲，您的回应方式和互动形式应当随着宝宝的发展而调整，以提供最适合的支持和刺激。
                                </p>
                                
                                <div class="space-y-2 text-sm">
                                    <button class="w-full p-3 bg-gray-50 rounded-lg text-left flex justify-between items-center age-stage-btn" data-stage="newborn">
                                        <div class="flex items-center">
                                            <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0 mr-3">
                                                <i class="fas fa-baby text-pink-600"></i>
                                            </div>
                                            <span class="font-medium text-gray-800">新生儿期 (0-3个月)</span>
                                        </div>
                                        <i class="fas fa-chevron-right text-gray-400"></i>
                                    </button>
                                    
                                    <button class="w-full p-3 bg-gray-50 rounded-lg text-left flex justify-between items-center age-stage-btn" data-stage="infant1">
                                        <div class="flex items-center">
                                            <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mr-3">
                                                <i class="fas fa-baby-carriage text-purple-600"></i>
                                            </div>
                                            <span class="font-medium text-gray-800">早期婴儿 (3-6个月)</span>
                                        </div>
                                        <i class="fas fa-chevron-right text-gray-400"></i>
                                    </button>
                                    
                                    <button class="w-full p-3 bg-gray-50 rounded-lg text-left flex justify-between items-center age-stage-btn" data-stage="infant2">
                                        <div class="flex items-center">
                                            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0 mr-3">
                                                <i class="fas fa-laugh text-indigo-600"></i>
                                            </div>
                                            <span class="font-medium text-gray-800">中期婴儿 (6-9个月)</span>
                                        </div>
                                        <i class="fas fa-chevron-right text-gray-400"></i>
                                    </button>
                                    
                                    <button class="w-full p-3 bg-gray-50 rounded-lg text-left flex justify-between items-center age-stage-btn" data-stage="infant3">
                                        <div class="flex items-center">
                                            <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0 mr-3">
                                                <i class="fas fa-walking text-red-600"></i>
                                            </div>
                                            <span class="font-medium text-gray-800">晚期婴儿 (9-12个月)</span>
                                        </div>
                                        <i class="fas fa-chevron-right text-gray-400"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- 新生儿期内容 -->
                            <div id="newborn-stage" class="age-stage-content">
                                <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                    <div class="flex justify-between items-center mb-3">
                                        <h3 class="font-bold text-gray-800">新生儿期 (0-3个月)</h3>
                                        <span class="text-xs bg-pink-100 text-pink-600 px-2 py-1 rounded-full">敏感期</span>
                                    </div>
                                    
                                    <div class="bg-pink-50 p-3 rounded-lg mb-4">
                                        <p class="text-pink-800 text-sm">
                                            这一阶段的宝宝主要专注于适应外界环境，建立基本的生理节律和感官发展。作为母亲，您温柔的触摸、声音和眼神是宝宝最需要的刺激。
                                        </p>
                                    </div>
                                    
                                    <div class="space-y-4 text-sm">
                                        <div class="flex items-start">
                                            <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0 mr-3">
                                                <i class="fas fa-eye text-pink-600"></i>
                                            </div>
                                            <div>
                                                <h4 class="font-medium text-gray-800">发展特点</h4>
                                                <ul class="list-disc list-inside text-gray-600 space-y-1 mt-1">
                                                    <li>视觉能力逐渐发展，能看清20-30厘米距离的物体</li>
                                                    <li>开始出现社交性微笑，对人脸特别感兴趣</li>
                                                    <li>逐渐能抬头，短暂控制头部</li>
                                                    <li>对声音有反应，尤其是高音调的柔和声音</li>
                                                    <li>可能开始发出咿呀声和其他声音</li>
                                                </ul>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-start">
                                            <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0 mr-3">
                                                <i class="fas fa-hand-holding-heart text-pink-600"></i>
                                            </div>
                                            <div>
                                                <h4 class="font-medium text-gray-800">母婴互动建议</h4>
                                                <ul class="list-disc list-inside text-gray-600 space-y-1 mt-1">
                                                    <li>面对面互动：保持20-30厘米距离，让宝宝看清您的脸</li>
                                                    <li>轻柔抚触：温和地按摩宝宝的手、脚和身体</li>
                                                    <li>肌肤接触：尝试袋鼠式护理，增加亲密感</li>
                                                    <li>柔和对话：用轻柔的声音与宝宝交谈，描述您的行为和周围环境</li>
                                                    <li>回应哭声：及时回应宝宝的需要，建立信任和安全感</li>
                                                </ul>
                                            </div>
                                        </div>
                                        
                                        <div class="border border-pink-200 rounded-lg overflow-hidden">
                                            <div class="p-3 bg-pink-50">
                                                <h4 class="font-medium text-pink-800">推荐互动活动</h4>
                                            </div>
                                            <div class="p-3">
                                                <div class="space-y-3">
                                                    <div class="flex items-start">
                                                        <div class="bg-pink-100 text-pink-600 w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mr-2">1</div>
                                                        <div>
                                                            <p class="font-medium text-gray-800">镜像表情游戏</p>
                                                            <p class="text-gray-600 text-xs">面对宝宝，做夸张的表情，如张大嘴巴、吐舌头，然后停下来让宝宝有回应的机会。</p>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="flex items-start">
                                                        <div class="bg-pink-100 text-pink-600 w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mr-2">2</div>
                                                        <div>
                                                            <p class="font-medium text-gray-800">摇铃追踪</p>
                                                            <p class="text-gray-600 text-xs">用柔和的摇铃在宝宝视线范围内缓慢移动，帮助锻炼眼球追踪能力。</p>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="flex items-start">
                                                        <div class="bg-pink-100 text-pink-600 w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mr-2">3</div>
                                                        <div>
                                                            <p class="font-medium text-gray-800">轻柔身体按摩</p>
                                                            <p class="text-gray-600 text-xs">使用婴儿油进行全身轻柔按摩，边按摩边唱歌或轻声交谈。</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <button id="more-newborn-btn" class="mt-3 w-full py-2 bg-pink-100 text-pink-600 text-sm rounded-lg font-medium">
                                                    <i class="fas fa-plus-circle mr-1"></i> 查看更多新生儿活动
                                                </button>
                                            </div>
                                        </div>
                                        
                                        <div class="bg-pink-50 p-3 rounded-lg">
                                            <p class="text-pink-800 text-sm">
                                                <i class="fas fa-heart mr-1"></i>
                                                <span class="font-medium">母亲提示：</span>
                                                新生儿很容易疲劳，注意观察宝宝的疲倦信号（如移开视线、打哈欠、烦躁），适时结束互动。尊重宝宝的需要比坚持完成活动更重要。
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 早期婴儿期内容 -->
                            <div id="infant1-stage" class="age-stage-content hidden">
                                <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                    <h3 class="font-bold text-gray-800 mb-3">早期婴儿 (3-6个月)</h3>
                                    
                                    <div class="bg-purple-50 p-3 rounded-lg mb-4">
                                        <p class="text-purple-800 text-sm">
                                            3-6个月的宝宝变得更加活跃和互动，开始对外界产生更强的好奇心。这一阶段的宝宝更多地微笑、大笑，并开始探索自己的身体和周围物体。
                                        </p>
                                    </div>
                                    
                                    <div class="space-y-4 text-sm">
                                        <div class="flex items-start">
                                            <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mr-3">
                                                <i class="fas fa-child text-purple-600"></i>
                                            </div>
                                            <div>
                                                <h4 class="font-medium text-gray-800">发展特点</h4>
                                                <ul class="list-disc list-inside text-gray-600 space-y-1 mt-1">
                                                    <li>能自主抬头和支撑上半身</li>
                                                    <li>开始伸手抓取物体</li>
                                                    <li>对各种声音和音乐有明显反应</li>
                                                    <li>能辨认熟悉的面孔，对陌生人可能产生恐惧</li>
                                                    <li>发出更多元的声音，如咯咯笑和咿呀学语</li>
                                                </ul>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-start">
                                            <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mr-3">
                                                <i class="fas fa-hands-helping text-purple-600"></i>
                                            </div>
                                            <div>
                                                <h4 class="font-medium text-gray-800">互动要点</h4>
                                                <ul class="list-disc list-inside text-gray-600 space-y-1 mt-1">
                                                    <li>提供适合抓握的玩具，鼓励手部动作</li>
                                                    <li>多变化的面部表情和声音，促进社交互动</li>
                                                    <li>腹部俯卧练习，帮助增强颈部和上身肌肉</li>
                                                    <li>轻松的音乐和节奏活动，培养听觉能力</li>
                                                    <li>开始简单的阅读习惯，即使宝宝不理解内容</li>
                                                </ul>
                                            </div>
                                        </div>
                                        
                                        <button class="w-full py-2 bg-purple-500 text-white text-sm rounded-lg font-medium" id="infant1-activities-btn">
                                            <i class="fas fa-th-list mr-1"></i> 查看适合3-6个月宝宝的互动活动
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 中期婴儿期内容 -->
                            <div id="infant2-stage" class="age-stage-content hidden">
                                <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                    <h3 class="font-bold text-gray-800 mb-3">中期婴儿 (6-9个月)</h3>
                                    
                                    <div class="bg-indigo-50 p-3 rounded-lg mb-4">
                                        <p class="text-indigo-800 text-sm">
                                            这一阶段的宝宝移动能力大幅提升，开始坐立、爬行，对探索环境充满热情。他们能更好地理解因果关系，并且社交能力显著增强。
                                        </p>
                                    </div>
                                    
                                    <p class="text-sm text-gray-600 mb-4">
                                        6-9个月是宝宝行动能力发展的重要阶段，也是语言理解的关键期。此时与宝宝的互动应更多地鼓励其主动性和探索欲。
                                    </p>
                                    
                                    <div class="space-y-4 text-sm">
                                        <div class="border border-indigo-200 rounded-lg overflow-hidden">
                                            <div class="p-3 bg-indigo-50">
                                                <h4 class="font-medium text-indigo-800">关键发展里程碑</h4>
                                            </div>
                                            <div class="p-3 grid grid-cols-2 gap-2">
                                                <div class="flex items-center">
                                                    <i class="fas fa-check text-green-500 mr-2"></i>
                                                    <span class="text-gray-700">独立坐立</span>
                                                </div>
                                                <div class="flex items-center">
                                                    <i class="fas fa-check text-green-500 mr-2"></i>
                                                    <span class="text-gray-700">开始爬行</span>
                                                </div>
                                                <div class="flex items-center">
                                                    <i class="fas fa-check text-green-500 mr-2"></i>
                                                    <span class="text-gray-700">拇指和食指捏取</span>
                                                </div>
                                                <div class="flex items-center">
                                                    <i class="fas fa-check text-green-500 mr-2"></i>
                                                    <span class="text-gray-700">对自己名字有反应</span>
                                                </div>
                                                <div class="flex items-center">
                                                    <i class="fas fa-check text-green-500 mr-2"></i>
                                                    <span class="text-gray-700">开始理解常见词汇</span>
                                                </div>
                                                <div class="flex items-center">
                                                    <i class="fas fa-check text-green-500 mr-2"></i>
                                                    <span class="text-gray-700">出现分离焦虑</span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <button class="w-full py-2 bg-indigo-500 text-white text-sm rounded-lg font-medium" id="infant2-activities-btn">
                                            <i class="fas fa-th-list mr-1"></i> 查看适合6-9个月宝宝的互动活动
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 晚期婴儿期内容 -->
                            <div id="infant3-stage" class="age-stage-content hidden">
                                <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                    <h3 class="font-bold text-gray-800 mb-3">晚期婴儿 (9-12个月)</h3>
                                    
                                    <div class="bg-red-50 p-3 rounded-lg mb-4">
                                        <p class="text-red-800 text-sm">
                                            9-12个月的宝宝处于幼儿过渡期，开始尝试直立行走，语言理解迅速发展，模仿能力增强，可能会说出第一个有意义的单词。
                                        </p>
                                    </div>
                                    
                                    <div class="space-y-4 text-sm">
                                        <button class="w-full py-2 bg-red-500 text-white text-sm rounded-lg font-medium" id="infant3-activities-btn">
                                            <i class="fas fa-th-list mr-1"></i> 查看适合9-12个月宝宝的互动活动
                                        </button>
                                        
                                        <div class="bg-red-50 p-3 rounded-lg">
                                            <p class="text-red-800 text-sm">
                                                <i class="fas fa-lightbulb mr-1"></i>
                                                <span class="font-medium">互动提示：</span>
                                                这一阶段的宝宝开始表现出明显的独立意愿，但同时仍需要安全感。在提供探索自由的同时，保持情感上的连接和支持。
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="activities-content" class="interaction-content-item hidden">
                            <!-- 互动活动介绍 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                <h3 class="font-bold text-gray-800 mb-3">互动活动库</h3>
                                
                                <div class="bg-pink-50 p-3 rounded-lg mb-4">
                                    <div class="flex">
                                        <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-star text-pink-600"></i>
                                        </div>
                                        <div>
                                            <p class="text-pink-800 text-sm">
                                                我们精心整理了适合不同年龄阶段的互动活动，每个活动均旨在促进宝宝特定领域的发展，同时强化亲子联结。这些活动简单易行，多数使用家中常见物品，便于您随时开展。
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 活动筛选器 -->
                                <div class="space-y-3 mb-4">
                                    <div class="flex items-center justify-between">
                                        <h4 class="text-sm font-medium text-gray-700">按类别筛选活动</h4>
                                        <button id="favorite-activities-btn" class="text-xs text-pink-600 flex items-center">
                                            <i class="fas fa-heart mr-1"></i> 我的收藏
                                        </button>
                                    </div>
                                    
                                    <div class="flex flex-wrap gap-2">
                                        <button class="activity-filter px-3 py-1.5 bg-pink-100 text-pink-800 rounded-full text-xs font-medium active">
                                            全部活动
                                        </button>
                                        <button class="activity-filter px-3 py-1.5 bg-gray-100 text-gray-600 rounded-full text-xs font-medium">
                                            感官发展
                                        </button>
                                        <button class="activity-filter px-3 py-1.5 bg-gray-100 text-gray-600 rounded-full text-xs font-medium">
                                            大动作
                                        </button>
                                        <button class="activity-filter px-3 py-1.5 bg-gray-100 text-gray-600 rounded-full text-xs font-medium">
                                            精细动作
                                        </button>
                                        <button class="activity-filter px-3 py-1.5 bg-gray-100 text-gray-600 rounded-full text-xs font-medium">
                                            语言发展
                                        </button>
                                        <button class="activity-filter px-3 py-1.5 bg-gray-100 text-gray-600 rounded-full text-xs font-medium">
                                            社交情感
                                        </button>
                                        <button class="activity-filter px-3 py-1.5 bg-gray-100 text-gray-600 rounded-full text-xs font-medium">
                                            认知学习
                                        </button>
                                    </div>
                                    
                                    <div class="flex justify-between items-center mt-2">
                                        <div class="flex items-center">
                                            <span class="text-xs text-gray-500 mr-2">难度:</span>
                                            <div class="flex gap-1">
                                                <button class="difficulty-filter px-2 py-0.5 border border-gray-200 rounded text-xs active">全部</button>
                                                <button class="difficulty-filter px-2 py-0.5 border border-gray-200 rounded text-xs">简单</button>
                                                <button class="difficulty-filter px-2 py-0.5 border border-gray-200 rounded text-xs">中等</button>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center">
                                            <span class="text-xs text-gray-500 mr-2">年龄:</span>
                                            <select class="text-xs border border-gray-200 rounded px-2 py-0.5">
                                                <option>全部年龄</option>
                                                <option>0-3个月</option>
                                                <option>3-6个月</option>
                                                <option>6-9个月</option>
                                                <option>9-12个月</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 活动卡片列表 -->
                            <div class="space-y-4">
                                <!-- 活动卡片1 -->
                                <div class="interaction-card bg-white overflow-hidden">
                                    <div class="relative">
                                        <img src="https://images.unsplash.com/photo-1544126592-807ade215a0b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="轻柔抚触" class="w-full h-48 object-cover">
                                        <div class="absolute top-2 right-2 flex gap-1">
                                            <span class="activity-level easy text-xs">简单</span>
                                            <span class="bg-pink-100 text-pink-600 rounded-full px-2 py-0.5 text-xs">0-3月</span>
                                        </div>
                                        <button class="absolute top-2 left-2 w-8 h-8 bg-white bg-opacity-70 rounded-full flex items-center justify-center text-gray-600 hover:text-pink-600">
                                            <i class="far fa-heart"></i>
                                        </button>
                                    </div>
                                    <div class="p-4">
                                        <h4 class="font-medium text-gray-800">轻柔抚触与婴儿按摩</h4>
                                        <p class="text-sm text-gray-600 mt-1 line-clamp-2">
                                            通过温和的触摸和按摩促进母婴情感联结并支持感官发展，同时缓解宝宝胀气不适。
                                        </p>
                                        <div class="flex flex-wrap gap-1 mt-2">
                                            <span class="development-badge bg-blue-100 text-blue-800">感官发展</span>
                                            <span class="development-badge bg-pink-100 text-pink-800">亲子纽带</span>
                                        </div>
                                        <div class="mt-3 flex justify-between items-center">
                                            <div class="flex items-center text-xs text-gray-500">
                                                <i class="fas fa-clock mr-1"></i>
                                                <span>10-15分钟</span>
                                            </div>
                                            <button class="px-3 py-1.5 bg-pink-500 text-white text-xs font-medium rounded-lg">
                                                查看详情
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 活动卡片2 -->
                                <div class="interaction-card bg-white overflow-hidden">
                                    <div class="relative">
                                        <img src="https://images.unsplash.com/photo-1602559277502-5ebcf743c5ba?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="面部表情游戏" class="w-full h-48 object-cover">
                                        <div class="absolute top-2 right-2 flex gap-1">
                                            <span class="activity-level easy text-xs">简单</span>
                                            <span class="bg-pink-100 text-pink-600 rounded-full px-2 py-0.5 text-xs">0-6月</span>
                                        </div>
                                        <button class="absolute top-2 left-2 w-8 h-8 bg-white bg-opacity-70 rounded-full flex items-center justify-center text-gray-600 hover:text-pink-600">
                                            <i class="far fa-heart"></i>
                                        </button>
                                    </div>
                                    <div class="p-4">
                                        <h4 class="font-medium text-gray-800">表情镜像与模仿游戏</h4>
                                        <p class="text-sm text-gray-600 mt-1 line-clamp-2">
                                            通过面部表情互动，培养宝宝的社交能力，促进大脑中镜像神经元系统的发展。
                                        </p>
                                        <div class="flex flex-wrap gap-1 mt-2">
                                            <span class="development-badge bg-yellow-100 text-yellow-800">社交情感</span>
                                            <span class="development-badge bg-green-100 text-green-800">认知学习</span>
                                        </div>
                                        <div class="mt-3 flex justify-between items-center">
                                            <div class="flex items-center text-xs text-gray-500">
                                                <i class="fas fa-clock mr-1"></i>
                                                <span>5-10分钟</span>
                                            </div>
                                            <button class="px-3 py-1.5 bg-pink-500 text-white text-xs font-medium rounded-lg">
                                                查看详情
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 活动卡片3 -->
                                <div class="interaction-card bg-white overflow-hidden">
                                    <div class="relative">
                                        <img src="https://images.unsplash.com/photo-1607979036079-64a4573b9239?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="阅读时光" class="w-full h-48 object-cover">
                                        <div class="absolute top-2 right-2 flex gap-1">
                                            <span class="activity-level easy text-xs">简单</span>
                                            <span class="bg-purple-100 text-purple-600 rounded-full px-2 py-0.5 text-xs">全年龄</span>
                                        </div>
                                        <button class="absolute top-2 left-2 w-8 h-8 bg-white bg-opacity-70 rounded-full flex items-center justify-center text-pink-600">
                                            <i class="fas fa-heart"></i>
                                        </button>
                                    </div>
                                    <div class="p-4">
                                        <h4 class="font-medium text-gray-800">亲子绘本阅读</h4>
                                        <p class="text-sm text-gray-600 mt-1 line-clamp-2">
                                            即使是很小的婴儿也能从阅读中获益，每天的阅读时光可以促进语言发展并建立安全依恋。
                                        </p>
                                        <div class="flex flex-wrap gap-1 mt-2">
                                            <span class="development-badge bg-purple-100 text-purple-800">语言发展</span>
                                            <span class="development-badge bg-pink-100 text-pink-800">亲子纽带</span>
                                        </div>
                                        <div class="mt-3 flex justify-between items-center">
                                            <div class="flex items-center text-xs text-gray-500">
                                                <i class="fas fa-clock mr-1"></i>
                                                <span>10-15分钟</span>
                                            </div>
                                            <button class="px-3 py-1.5 bg-pink-500 text-white text-xs font-medium rounded-lg">
                                                查看详情
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 活动卡片4 -->
                                <div class="interaction-card bg-white overflow-hidden">
                                    <div class="relative">
                                        <img src="https://images.unsplash.com/photo-1600880292089-90a7e086ee0c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="感官探索" class="w-full h-48 object-cover">
                                        <div class="absolute top-2 right-2 flex gap-1">
                                            <span class="activity-level medium text-xs">中等</span>
                                            <span class="bg-indigo-100 text-indigo-600 rounded-full px-2 py-0.5 text-xs">6-12月</span>
                                        </div>
                                        <button class="absolute top-2 left-2 w-8 h-8 bg-white bg-opacity-70 rounded-full flex items-center justify-center text-gray-600 hover:text-pink-600">
                                            <i class="far fa-heart"></i>
                                        </button>
                                    </div>
                                    <div class="p-4">
                                        <h4 class="font-medium text-gray-800">纹理感官探索盒</h4>
                                        <p class="text-sm text-gray-600 mt-1 line-clamp-2">
                                            创建安全的纹理探索体验，让宝宝通过触摸不同质地的材料，发展感官能力和精细运动技能。
                                        </p>
                                        <div class="flex flex-wrap gap-1 mt-2">
                                            <span class="development-badge bg-blue-100 text-blue-800">感官发展</span>
                                            <span class="development-badge bg-orange-100 text-orange-800">精细动作</span>
                                        </div>
                                        <div class="mt-3 flex justify-between items-center">
                                            <div class="flex items-center text-xs text-gray-500">
                                                <i class="fas fa-clock mr-1"></i>
                                                <span>15-20分钟</span>
                                            </div>
                                            <button class="px-3 py-1.5 bg-pink-500 text-white text-xs font-medium rounded-lg">
                                                查看详情
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 加载更多按钮 -->
                                <button class="w-full py-3 bg-gray-100 text-gray-600 text-sm rounded-lg font-medium">
                                    <i class="fas fa-spinner mr-1"></i> 加载更多活动
                                </button>
                            </div>

                            <!-- 活动详情弹窗将通过JavaScript动态生成 -->
                        </div>

                        <div id="bonding-content" class="interaction-content-item hidden">
                            <!-- 情感连接介绍 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                <h3 class="font-bold text-gray-800 mb-3">建立深厚情感纽带</h3>
                                
                                <div class="video-preview">
                                    <img src="https://images.unsplash.com/photo-1609859144475-a223d42284d5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="母婴亲密时刻" class="w-full h-48 object-cover">
                                    <div class="video-overlay">
                                        <div class="play-button">
                                            <i class="fas fa-play text-pink-600"></i>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mt-4 space-y-3 text-sm text-gray-600">
                                    <p>母婴之间的情感纽带是宝宝健康发展的基础，它不仅影响当下的幸福感，还会对宝宝的未来社交能力、情绪调节和整体心理健康产生深远影响。</p>
                                    
                                    <div class="bg-pink-50 p-3 rounded-lg">
                                        <p class="text-pink-800 text-sm">
                                            <i class="fas fa-quote-left mr-1"></i>
                                            研究表明，早期形成的安全依恋关系能够为孩子提供情感安全基地，使他们在未来更有勇气探索世界，同时也知道在需要时可以回到安全的怀抱中寻求安慰和支持。
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- 安全依恋形成 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                <h3 class="font-bold text-gray-800 mb-3">安全依恋的形成</h3>
                                
                                <div class="space-y-4 text-sm">
                                    <p class="text-gray-600">
                                        安全依恋是指宝宝对照顾者（特别是母亲）的一种情感联结，让宝宝感到安全、被爱，并相信自己的需求能得到回应。这种联结通过日常互动逐渐形成。
                                    </p>
                                    
                                    <div class="border border-pink-200 rounded-lg overflow-hidden">
                                        <div class="p-3 bg-pink-50">
                                            <h4 class="font-medium text-pink-800">安全依恋形成的关键要素</h4>
                                        </div>
                                        <div class="p-3">
                                            <div class="space-y-3">
                                                <div class="flex items-start">
                                                    <div class="w-8 h-8 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0 mr-3">
                                                        <i class="fas fa-sync-alt text-pink-600"></i>
                                                    </div>
                                                    <div>
                                                        <p class="font-medium text-gray-800">敏感回应</p>
                                                        <p class="text-gray-600">及时觉察并回应宝宝的需求信号，如哭泣、微笑或咯咯笑。这让宝宝学会信任您会在他们需要时提供支持。</p>
                                                    </div>
                                                </div>
                                                
                                                <div class="flex items-start">
                                                    <div class="w-8 h-8 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0 mr-3">
                                                        <i class="fas fa-clock text-pink-600"></i>
                                                    </div>
                                                    <div>
                                                        <p class="font-medium text-gray-800">一致性和可预测性</p>
                                                        <p class="text-gray-600">建立稳定的日常作息和回应方式，让宝宝感到世界是可预测的，增强安全感。</p>
                                                    </div>
                                                </div>
                                                
                                                <div class="flex items-start">
                                                    <div class="w-8 h-8 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0 mr-3">
                                                        <i class="fas fa-smile text-pink-600"></i>
                                                    </div>
                                                    <div>
                                                        <p class="font-medium text-gray-800">情感调谐</p>
                                                        <p class="text-gray-600">注意宝宝的情绪状态，并调整自己的行为和表情与之匹配，让宝宝感受到您理解和分享他们的感受。</p>
                                                    </div>
                                                </div>
                                                
                                                <div class="flex items-start">
                                                    <div class="w-8 h-8 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0 mr-3">
                                                        <i class="fas fa-hands text-pink-600"></i>
                                                    </div>
                                                    <div>
                                                        <p class="font-medium text-gray-800">身体接触</p>
                                                        <p class="text-gray-600">温柔的拥抱、抚触和亲吻等身体接触能刺激催产素释放，强化情感纽带。</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="bg-pink-50 p-3 rounded-lg">
                                        <p class="text-pink-800 text-sm">
                                            <i class="fas fa-lightbulb mr-1"></i>
                                            <span class="font-medium">重要提示：</span>
                                            建立安全依恋并不意味着完美无缺的回应。研究表明，母婴互动中的"良好匹配"只需达到30%左右，更重要的是能够及时修复互动中的"不匹配"或"断裂"。
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- 强化情感连接的策略 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                <h3 class="font-bold text-gray-800 mb-3">强化情感连接的策略</h3>
                                
                                <div class="space-y-4 text-sm">
                                    <div class="flex items-start">
                                        <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-eye text-pink-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">优质注视</h4>
                                            <p class="text-gray-600">与宝宝进行长时间的眼神接触，特别是在喂养、换尿布等亲密时刻。眼神接触能刺激大脑中与社交和情感处理相关的区域。</p>
                                            <p class="text-gray-500 text-xs mt-1">尝试：在喂奶时轻轻抚摸宝宝的脸颊，引导他们看向您的眼睛。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-music text-purple-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">轻声细语</h4>
                                            <p class="text-gray-600">用温柔的"婴儿语"与宝宝交谈，描述您的活动、宝宝的表情或周围环境。即使宝宝尚不理解言语，您的声音能带给他们安慰。</p>
                                            <p class="text-gray-500 text-xs mt-1">尝试：摇篮曲唱给宝宝听，同时轻轻拍打或抚摸他们。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-hand-holding-heart text-blue-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">肌肤接触</h4>
                                            <p class="text-gray-600">尽可能多地进行肌肤接触，如袋鼠式护理、婴儿按摩或简单地让宝宝躺在您裸露的胸前。肌肤接触能够刺激多种感官，调节宝宝的生理系统。</p>
                                            <p class="text-gray-500 text-xs mt-1">尝试：每天安排10-15分钟的专注肌肤接触时间，例如在洗澡后进行婴儿按摩。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-smile-beam text-green-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">互动游戏</h4>
                                            <p class="text-gray-600">简单的互动游戏如躲猫猫、摇铃追踪或表情模仿能增强情感纽带，同时促进宝宝的社交和认知发展。</p>
                                            <p class="text-gray-500 text-xs mt-1">尝试：用柔软的布玩捉迷藏游戏，先遮住自己的脸，然后露出来，看宝宝的反应。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-heart text-red-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">情感回应</h4>
                                            <p class="text-gray-600">对宝宝的情绪信号给予敏感回应，帮助他们理解和处理情绪。这包括安抚悲伤、分享喜悦和平静愤怒。</p>
                                            <p class="text-gray-500 text-xs mt-1">尝试：当宝宝高兴时，用明亮的声音和微笑回应；当宝宝哭泣时，用平静的声音和温柔的安抚回应。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 特殊挑战与解决方案 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                <h3 class="font-bold text-gray-800 mb-3">特殊情境中的情感连接</h3>
                                
                                <div class="space-y-4 text-sm">
                                    <div class="border border-gray-100 rounded-lg overflow-hidden">
                                        <div class="p-3 bg-gray-50">
                                            <h4 class="font-medium text-gray-800">当您感到疲惫或压力大时</h4>
                                        </div>
                                        <div class="p-3">
                                            <p class="text-gray-600 mb-2">
                                                作为新妈妈，感到疲惫和压力是正常的。这些情绪可能暂时影响您与宝宝的互动质量，但有策略可以帮助维持连接：
                                            </p>
                                            <ul class="list-disc list-inside text-gray-600 space-y-1">
                                                <li>进行简单的肌肤接触，如拥抱或让宝宝靠在您身上</li>
                                                <li>一起进行低能量活动，如轻柔摇晃或安静阅读</li>
                                                <li>接受伴侣或家人的帮助，给自己短暂休息的机会</li>
                                                <li>记住，完美的互动是不必要的—宝宝需要的是真实的您</li>
                                            </ul>
                                        </div>
                                    </div>
                                    
                                    <div class="border border-gray-100 rounded-lg overflow-hidden">
                                        <div class="p-3 bg-gray-50">
                                            <h4 class="font-medium text-gray-800">对于难以安抚的宝宝</h4>
                                        </div>
                                        <div class="p-3">
                                            <p class="text-gray-600 mb-2">
                                                有些宝宝天生气质更敏感或难以安抚，这可能让母婴互动更具挑战性：
                                            </p>
                                            <ul class="list-disc list-inside text-gray-600 space-y-1">
                                                <li>尝试不同的安抚方法，找出最适合您宝宝的方式</li>
                                                <li>降低环境刺激，创造平静的氛围</li>
                                                <li>保持平静和耐心，您的情绪会传递给宝宝</li>
                                                <li>寻求专业帮助，了解更多针对性策略</li>
                                            </ul>
                                        </div>
                                    </div>
                                    
                                    <div class="border border-gray-100 rounded-lg overflow-hidden">
                                        <div class="p-3 bg-gray-50">
                                            <h4 class="font-medium text-gray-800">在您必须外出工作时</h4>
                                        </div>
                                        <div class="p-3">
                                            <p class="text-gray-600 mb-2">
                                                工作与育儿的平衡可能令人担忧情感连接是否会受到影响：
                                            </p>
                                            <ul class="list-disc list-inside text-gray-600 space-y-1">
                                                <li>在一起的时间里创造高质量互动，如专注的游戏或阅读时光</li>
                                                <li>建立稳定的分离和重聚仪式，增强安全感</li>
                                                <li>在条件允许时，可以考虑向照顾者提供您的个人物品（如带有您气味的围巾）</li>
                                                <li>记住，安全依恋的质量比绝对时间更重要</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                
                                <button id="share-experience-btn" class="w-full mt-4 py-2.5 bg-pink-500 text-white text-sm rounded-lg font-medium">
                                    <i class="fas fa-share-alt mr-1"></i> 分享您的经验与故事
                                </button>
                            </div>
                        </div>

                        <div id="development-content" class="interaction-content-item hidden">
                            <!-- 发展领域介绍 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                <h3 class="font-bold text-gray-800 mb-3">全面促进宝宝发展</h3>
                                
                                <div class="bg-pink-50 p-3 rounded-lg mb-4">
                                    <div class="flex">
                                        <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-brain text-pink-600"></i>
                                        </div>
                                        <div>
                                            <p class="text-pink-800 text-sm">
                                                宝宝的大脑在前三年发展迅速，每天形成超过100万个神经连接。作为母亲，您的日常互动为宝宝的大脑发育奠定基础，促进认知、语言、身体、社交和情感各方面的健康发展。
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mt-4 grid grid-cols-2 gap-3 text-xs">
                                    <div class="flex flex-col items-center bg-gray-50 p-3 rounded-lg">
                                        <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-2">
                                            <i class="fas fa-brain text-blue-600"></i>
                                        </div>
                                        <span class="font-medium text-gray-800">认知发展</span>
                                    </div>
                                    
                                    <div class="flex flex-col items-center bg-gray-50 p-3 rounded-lg">
                                        <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-2">
                                            <i class="fas fa-comment-alt text-purple-600"></i>
                                        </div>
                                        <span class="font-medium text-gray-800">语言发展</span>
                                    </div>
                                    
                                    <div class="flex flex-col items-center bg-gray-50 p-3 rounded-lg">
                                        <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-2">
                                            <i class="fas fa-walking text-green-600"></i>
                                        </div>
                                        <span class="font-medium text-gray-800">身体运动</span>
                                    </div>
                                    
                                    <div class="flex flex-col items-center bg-gray-50 p-3 rounded-lg">
                                        <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mb-2">
                                            <i class="fas fa-users text-yellow-600"></i>
                                        </div>
                                        <span class="font-medium text-gray-800">社交情感</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 认知发展 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                <div class="flex items-center mb-3">
                                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mr-3">
                                        <i class="fas fa-brain text-blue-600"></i>
                                    </div>
                                    <h3 class="font-bold text-gray-800">认知发展</h3>
                                </div>
                                
                                <p class="text-sm text-gray-600 mb-4">
                                    认知发展包括思考、学习、解决问题和理解世界的能力。婴儿通过感官探索和与环境的互动来构建认知技能。
                                </p>
                                
                                <div class="space-y-4 text-sm">
                                    <div class="border border-blue-200 rounded-lg overflow-hidden">
                                        <div class="p-3 bg-blue-50">
                                            <h4 class="font-medium text-blue-800">支持认知发展的活动</h4>
                                        </div>
                                        <div class="p-3">
                                            <div class="space-y-3">
                                                <div class="flex items-start">
                                                    <div class="bg-blue-100 text-blue-600 w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mr-2">1</div>
                                                    <div>
                                                        <p class="font-medium text-gray-800">提供多感官探索机会</p>
                                                        <p class="text-gray-600 text-xs">让宝宝体验不同质地、声音、颜色和形状的物品。例如，用各种质地的布制作一本触觉书，或提供安全的家居物品让宝宝探索。</p>
                                                    </div>
                                                </div>
                                                
                                                <div class="flex items-start">
                                                    <div class="bg-blue-100 text-blue-600 w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mr-2">2</div>
                                                    <div>
                                                        <p class="font-medium text-gray-800">藏物游戏</p>
                                                        <p class="text-gray-600 text-xs">用毯子或容器轻轻盖住玩具，鼓励6个月以上的宝宝寻找。这有助于发展"物体恒存"概念—理解看不见的物体仍然存在。</p>
                                                    </div>
                                                </div>
                                                
                                                <div class="flex items-start">
                                                    <div class="bg-blue-100 text-blue-600 w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mr-2">3</div>
                                                    <div>
                                                        <p class="font-medium text-gray-800">因果关系游戏</p>
                                                        <p class="text-gray-600 text-xs">演示简单的因果关系，如按动按钮玩具发出声音。描述这种关系："看，当你按下按钮，就会有音乐！"</p>
                                                    </div>
                                                </div>
                                                
                                                <div class="flex items-start">
                                                    <div class="bg-blue-100 text-blue-600 w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mr-2">4</div>
                                                    <div>
                                                        <p class="font-medium text-gray-800">描述周围环境</p>
                                                        <p class="text-gray-600 text-xs">在日常活动中，用丰富的词汇描述您所看到、听到和做的事情。这帮助宝宝将语言与其经验联系起来。</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="bg-blue-50 p-3 rounded-lg">
                                        <p class="text-blue-800 text-sm">
                                            <i class="fas fa-lightbulb mr-1"></i>
                                            <span class="font-medium">母亲提示：</span>
                                            专注跟随宝宝的兴趣，而不是强行引导。当宝宝对某物表现出兴趣时，描述该物品的特性并鼓励探索，这比预设的"教学计划"更有效。
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- 语言发展 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                <div class="flex items-center mb-3">
                                    <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mr-3">
                                        <i class="fas fa-comment-alt text-purple-600"></i>
                                    </div>
                                    <h3 class="font-bold text-gray-800">语言发展</h3>
                                </div>
                                
                                <p class="text-sm text-gray-600 mb-4">
                                    语言发展从出生就开始了。即使在宝宝能说话之前，他们也在学习语言的声音、模式和与人交流的方式。您的交谈、阅读和唱歌对宝宝的语言发展至关重要。
                                </p>
                                
                                <div class="space-y-4 text-sm">
                                    <div class="flex items-start">
                                        <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-comment text-purple-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">对话式交流</h4>
                                            <p class="text-gray-600">即使宝宝尚不会说话，也要与他们进行"对话"。当宝宝发出咿呀声或其他声音时，给予回应并停顿，就像在对话一样。这种来回交流对大脑发育和语言学习至关重要。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-book text-purple-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">从出生开始阅读</h4>
                                            <p class="text-gray-600">每天阅读是培养语言能力的最佳方式之一。选择简单、色彩鲜艳的图画书，配合有表情的声音和面部表情朗读。描述图片，指出细节，并让阅读成为愉快的互动体验。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-music text-purple-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">歌曲和韵律</h4>
                                            <p class="text-gray-600">唱儿歌、摇篮曲和进行手指游戏。音乐的节奏和韵律帮助宝宝识别语言模式，音乐记忆也能促进语言发展。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-microphone text-purple-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">丰富的语言环境</h4>
                                            <p class="text-gray-600">使用多样化、准确的词汇描述日常活动和周围环境。尝试使用"婴儿语"（柔和、高音调的语调）的同时保持词汇的丰富性。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="bg-purple-50 p-3 rounded-lg">
                                        <p class="text-purple-800 text-sm">
                                            <i class="fas fa-lightbulb mr-1"></i>
                                            <span class="font-medium">语言里程碑：</span>
                                            不要将宝宝与其他宝宝比较。语言发展有很大的个体差异，有些宝宝可能在12个月前就说出第一个单词，而有些可能要到18个月左右。关键是看语言理解能力和交流意愿。
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- 大动作和精细动作发展 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                <div class="flex items-center mb-3">
                                    <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mr-3">
                                        <i class="fas fa-walking text-green-600"></i>
                                    </div>
                                    <h3 class="font-bold text-gray-800">身体运动技能</h3>
                                </div>
                                
                                <div class="space-y-4 text-sm">
                                    <div class="bg-green-50 p-3 rounded-lg mb-4">
                                        <p class="text-green-800 text-sm">
                                            身体运动技能分为大动作（使用大肌肉群的动作，如爬行、站立）和精细动作（手部和手指的小动作，如抓握、捏取）。这些技能的发展需要足够的空间、安全的环境和适当的挑战。
                                        </p>
                                    </div>
                                    
                                    <!-- 大动作发展 -->
                                    <div class="border border-gray-100 rounded-lg overflow-hidden">
                                        <div class="p-3 bg-green-50">
                                            <h4 class="font-medium text-green-800">促进大动作发展</h4>
                                        </div>
                                        <div class="p-3">
                                            <div class="space-y-3">
                                                <div class="flex items-start">
                                                    <div class="bg-green-100 text-green-600 w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mr-2">1</div>
                                                    <div>
                                                        <p class="font-medium text-gray-800">足够的腹部时间</p>
                                                        <p class="text-gray-600 text-xs">在宝宝清醒且有人监督时，安排每天多次腹部俯卧时间，帮助增强颈部、肩部和背部肌肉，为爬行做准备。</p>
                                                    </div>
                                                </div>
                                                
                                                <div class="flex items-start">
                                                    <div class="bg-green-100 text-green-600 w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mr-2">2</div>
                                                    <div>
                                                        <p class="font-medium text-gray-800">创造安全的探索空间</p>
                                                        <p class="text-gray-600 text-xs">准备一个安全、开放的区域，让宝宝可以自由移动，放置一些稍远的玩具鼓励他们爬行或移动去拿取。</p>
                                                    </div>
                                                </div>
                                                
                                                <div class="flex items-start">
                                                    <div class="bg-green-100 text-green-600 w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mr-2">3</div>
                                                    <div>
                                                        <p class="font-medium text-gray-800">辅助练习站立</p>
                                                        <p class="text-gray-600 text-xs">当宝宝准备好时，支持他们站立，让他们感受自己的体重。随着肌肉的发展，逐渐减少支持力度。</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 精细动作发展 -->
                                    <div class="border border-gray-100 rounded-lg overflow-hidden">
                                        <div class="p-3 bg-green-50">
                                            <h4 class="font-medium text-green-800">促进精细动作发展</h4>
                                        </div>
                                        <div class="p-3">
                                            <div class="space-y-3">
                                                <div class="flex items-start">
                                                    <div class="bg-green-100 text-green-600 w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mr-2">1</div>
                                                    <div>
                                                        <p class="font-medium text-gray-800">提供安全的抓握物品</p>
                                                        <p class="text-gray-600 text-xs">选择大小、形状、质地各异的安全物品（如织物方块、软球、大型链环），鼓励宝宝伸手抓取。</p>
                                                    </div>
                                                </div>
                                                
                                                <div class="flex items-start">
                                                    <div class="bg-green-100 text-green-600 w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mr-2">2</div>
                                                    <div>
                                                        <p class="font-medium text-gray-800">手指食物</p>
                                                        <p class="text-gray-600 text-xs">当宝宝准备好辅食时，提供适合的手指食物，如煮熟的蔬菜条或软水果，让他们练习精细抓取。</p>
                                                    </div>
                                                </div>
                                                
                                                <div class="flex items-start">
                                                    <div class="bg-green-100 text-green-600 w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mr-2">3</div>
                                                    <div>
                                                        <p class="font-medium text-gray-800">简单容器游戏</p>
                                                        <p class="text-gray-600 text-xs">教宝宝把物品放入容器中再取出来，这有助于发展手眼协调和精细动作控制。</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 社交情感发展 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-5">
                                <div class="flex items-center mb-3">
                                    <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center flex-shrink-0 mr-3">
                                        <i class="fas fa-users text-yellow-600"></i>
                                    </div>
                                    <h3 class="font-bold text-gray-800">社交情感发展</h3>
                                </div>
                                
                                <p class="text-sm text-gray-600 mb-4">
                                    社交情感发展涉及宝宝对自己和他人情绪的理解，以及建立健康关系的能力。这一领域的健康发展奠定了宝宝未来心理健康和人际关系的基础。
                                </p>
                                
                                <div class="space-y-4 text-sm">
                                    <div class="flex items-start">
                                        <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-smile text-yellow-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">情绪命名与反映</h4>
                                            <p class="text-gray-600">帮助宝宝理解情绪，对他们的情绪状态进行命名："我看到你在笑，你很开心！"或"你哭了，你是不是感到难过？"这有助于宝宝发展情绪认知和表达能力。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-shield-alt text-yellow-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">安全基地</h4>
                                            <p class="text-gray-600">当宝宝探索周围环境时，成为他们的"安全基地"—让他们知道可以随时回到您身边获得安慰和支持。这种平衡鼓励探索和独立性，同时保持安全感。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-theater-masks text-yellow-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">面部表情游戏</h4>
                                            <p class="text-gray-600">玩夸张的面部表情游戏，表现不同的情绪。您可以使用镜子让宝宝看到自己的表情，这有助于情绪识别和表达能力的发展。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-users text-yellow-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">社交互动机会</h4>
                                            <p class="text-gray-600">随着宝宝的成长，为他们创造与其他宝宝和儿童互动的安全机会。即使在婴儿期，观察其他孩子也是社交学习的重要形式。</p>
                                        </div>
                                    </div>
                                    
                                    <div class="bg-yellow-50 p-3 rounded-lg">
                                        <p class="text-yellow-800 text-sm">
                                            <i class="fas fa-heart mr-1"></i>
                                            <span class="font-medium">母亲自我照顾提示：</span>
                                            您的情绪健康直接影响宝宝的社交情感发展。照顾好自己，寻求支持，管理压力，这不仅对您有益，也对宝宝的健康发展至关重要。
                                        </p>
                                    </div>
                                </div>
                                
                                <button id="development-plan-btn" class="w-full mt-4 py-2.5 bg-pink-500 text-white text-sm rounded-lg font-medium">
                                    <i class="fas fa-clipboard-check mr-1"></i> 获取个性化发展支持计划
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部导航栏 -->
            <div class="bottom-nav">
                <a href="home.html" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-home text-xl"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="records.html" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-clipboard-list text-xl"></i>
                    <span class="text-xs mt-1">记录</span>
                </a>
                <a href="parenting.html" class="flex flex-col items-center tab-active">
                    <i class="fas fa-baby text-xl"></i>
                    <span class="text-xs mt-1">育儿</span>
                </a>
                <a href="profile.html" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-user text-xl"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>

            <!-- 提示框 -->
            <div class="toast" id="toast"></div>
        </div>

        <!-- JavaScript功能 -->
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // 选项卡切换功能
                const tabs = document.querySelectorAll('.interaction-tab');
                tabs.forEach(tab => {
                    tab.addEventListener('click', function() {
                        // 移除所有选项卡的激活状态
                        tabs.forEach(t => t.classList.remove('active'));
                        // 添加当前选项卡的激活状态
                        this.classList.add('active');
                        
                        // 隐藏所有内容
                        const contentItems = document.querySelectorAll('.interaction-content-item');
                        contentItems.forEach(item => item.classList.add('hidden'));
                        
                        // 显示对应内容
                        const contentId = this.getAttribute('data-content') + '-content';
                        document.getElementById(contentId).classList.remove('hidden');
                    });
                });
                
                // 年龄阶段按钮功能
                const stageButtons = document.querySelectorAll('.age-stage-btn');
                if (stageButtons.length > 0) {
                    stageButtons.forEach(btn => {
                        btn.addEventListener('click', function() {
                            const stage = this.getAttribute('data-stage');
                            
                            // 隐藏所有年龄阶段内容
                            const stageContents = document.querySelectorAll('.age-stage-content');
                            stageContents.forEach(content => content.classList.add('hidden'));
                            
                            // 显示选中的年龄阶段内容
                            document.getElementById(stage + '-stage').classList.remove('hidden');
                        });
                    });
                }
                
                // 活动筛选器功能
                const activityFilters = document.querySelectorAll('.activity-filter');
                if (activityFilters.length > 0) {
                    activityFilters.forEach(filter => {
                        filter.addEventListener('click', function() {
                            // 移除所有筛选器的激活状态
                            activityFilters.forEach(f => f.classList.remove('active', 'bg-pink-100', 'text-pink-800'));
                            activityFilters.forEach(f => f.classList.add('bg-gray-100', 'text-gray-600'));
                            
                            // 添加当前筛选器的激活状态
                            this.classList.remove('bg-gray-100', 'text-gray-600');
                            this.classList.add('active', 'bg-pink-100', 'text-pink-800');
                            
                            // 显示筛选结果
                            showToast('正在筛选: ' + this.textContent.trim());
                        });
                    });
                }
                
                // 难度筛选器功能
                const difficultyFilters = document.querySelectorAll('.difficulty-filter');
                if (difficultyFilters.length > 0) {
                    difficultyFilters.forEach(filter => {
                        filter.addEventListener('click', function() {
                            // 移除所有难度筛选器的激活状态
                            difficultyFilters.forEach(f => f.classList.remove('active'));
                            
                            // 添加当前难度筛选器的激活状态
                            this.classList.add('active');
                            
                            showToast('筛选难度: ' + this.textContent.trim());
                        });
                    });
                }
                
                // 视频播放按钮
                const videoButtons = document.querySelectorAll('.play-button');
                if (videoButtons.length > 0) {
                    videoButtons.forEach(btn => {
                        btn.addEventListener('click', function() {
                            showToast('视频播放功能将在正式版中提供');
                        });
                    });
                }
                
                // 收藏按钮
                const favoriteButtons = document.querySelectorAll('.interaction-card .fa-heart, .far.fa-heart').forEach(icon => {
                    icon.parentElement.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const isFavorite = this.querySelector('i').classList.contains('fas');
                        if (isFavorite) {
                            this.querySelector('i').classList.replace('fas', 'far');
                            this.classList.remove('text-pink-600');
                            this.classList.add('text-gray-600');
                            showToast('已取消收藏');
                        } else {
                            this.querySelector('i').classList.replace('far', 'fas');
                            this.classList.remove('text-gray-600');
                            this.classList.add('text-pink-600');
                            showToast('已添加到收藏');
                        }
                    });
                });
                
                // 互动活动卡片点击处理
                const activityCards = document.querySelectorAll('.interaction-card');
                activityCards.forEach(card => {
                    const detailBtn = card.querySelector('button');
                    if (detailBtn) {
                        detailBtn.addEventListener('click', function(e) {
                            e.stopPropagation();
                            showToast('正在加载活动详情...');
                        });
                    }
                });
                
                // 其他按钮点击处理
                if (document.getElementById('more-newborn-btn')) {
                    document.getElementById('more-newborn-btn').addEventListener('click', function() {
                        showToast('加载更多新生儿互动活动...');
                    });
                }
                
                if (document.getElementById('favorite-activities-btn')) {
                    document.getElementById('favorite-activities-btn').addEventListener('click', function() {
                        showToast('正在查看收藏的活动...');
                    });
                }
                
                if (document.getElementById('share-experience-btn')) {
                    document.getElementById('share-experience-btn').addEventListener('click', function() {
                        showToast('正在打开分享面板...');
                    });
                }
                
                if (document.getElementById('infant1-activities-btn')) {
                    document.getElementById('infant1-activities-btn').addEventListener('click', function() {
                        showToast('加载3-6个月婴儿互动活动...');
                    });
                }
                
                if (document.getElementById('infant2-activities-btn')) {
                    document.getElementById('infant2-activities-btn').addEventListener('click', function() {
                        showToast('加载6-9个月婴儿互动活动...');
                    });
                }
                
                if (document.getElementById('infant3-activities-btn')) {
                    document.getElementById('infant3-activities-btn').addEventListener('click', function() {
                        showToast('加载9-12个月婴儿互动活动...');
                    });
                }
                
                if (document.getElementById('development-plan-btn')) {
                    document.getElementById('development-plan-btn').addEventListener('click', function() {
                        showToast('正在生成个性化发展支持计划...');
                    });
                }
            });
            
            // 提示框函数
            function showToast(message) {
                const toast = document.getElementById('toast');
                toast.textContent = message;
                toast.classList.add('show');
                setTimeout(() => {
                    toast.classList.remove('show');
                }, 3000);
            }
        </script>
    </body>
</html>
